<template>
  <div
    class="module-border"
    :class="{'flat-theme': themeConfig.moduleTheme == 'flat',
    'default-height-left-title': themeConfig.moduleTheme == 'default' && (moduleType == '1x2' || moduleType == '43x2'),
    'default-middle-left-title': themeConfig.moduleTheme == 'default' && (moduleType == '2x32' || moduleType == '43x32'),
    'default-height-center-title': themeConfig.moduleTheme == 'default' && (moduleType == '2x2' || moduleType == '3x2'),
    'flat-short-center-title': themeConfig.moduleTheme == 'flat' && moduleType == '2x1',
    'flat-middle-center-title': themeConfig.moduleTheme == 'flat' && moduleType == '2x32',
    'flat-height-center-title': themeConfig.moduleTheme == 'flat' && (moduleType == '2x2' || moduleType == '3x2' || moduleType == '1x2' || moduleType == '43x2')}"
    :style="borderStyle">
    <div class="module-border-content">
      <img class="borderImg" :class="{'opacity-img': isNoImg}" :src="borderImg" alt="">
      <div class="border-content">
        <div class="module-title"
             :class="{'max-module-title': isNoImg, 'can-click': goPageUrl != ''}">
          <img
            v-if="themeConfig.moduleTheme == 'default'"
            class="module-title-img"
            :src="icon"/>
          <span @click="goPage">{{titleText}}</span>
        </div>
        <div class="module-main" :class="{'max-module-main': isNoImg}"  v-if="organType == 6 && organModelType != 6">
          <div class="view-permission">
            <div class="view-permission-content">
              <img src="./../../assets/images/icon/empty.png" alt="">
              <p>此模块只支持项目级别数据，请选择项目节点！</p>
            </div>
          </div>
        </div>
        <div class="module-main" :class="{'max-module-main': isNoImg}"  v-else>
          <slot name="module-content"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'moduleBorder',
  props: {
    moduleType: {
      type: String,
      default: '1x1'
    },
    icon: {
      type: String
    },
    titleText: {
      type: String,
      default: ''
    },
    goPageUrl: {
      type: String,
      default: ''
    },
    isNoImg: {
      type: Boolean,
      default: false
    },
    organType: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
    }
  },
  computed: {
    themeConfig () {
      return this.$store.state.themeConfig
    },
    borderStyle () {
      let style = {}
      switch (this.moduleType) {
        case '1x1': style.width = '25%'
          break
        case '1x2': style.width = '25%'
          break
        case '2x1': style.width = '50%'
          break
        case '2x2': style.width = '50%'
          break
        case '2x32': style.width = '50%'
          break
        case '3x2': style.width = '75%'
          break
        case '4x1': style.width = '100%'
          break
        case '43x1': style.width = 'calc(100% / 3)'
          break
        case '43x32': style.width = 'calc(100% / 3)'
          break
        case '43x2': style.width = 'calc(100% / 3)'
          break
      }
      return style
    },
    borderImg () {
      return require(`./../../assets/images/${this.themeConfig.moduleTheme}/moduleTheme${this.moduleType}.png`)
    },
    organModelType () {
      return this.$store.state.organModel.orgType
    }
  },
  methods: {
    goPage () {
      if (this.goPageUrl !== '') {
        this.$router.push({ path: this.goPageUrl })
        this.$nextTick(function () {
          this.$store.commit('CHANGEPAGEINDEX', false)
          this.$store.commit('CHANGEPAGENAME', this.titleText)
        })
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.module-border {
  position: absolute;
  .module-border-content{
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: 4px;
    position: relative;
  }
  .borderImg {
    width: 100%;
    display: block;
    &.opacity-img {
      opacity: 0;
    }
  }
  .border-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .module-title {
      width: 100%;
      height: 8.8%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: $moduleFontSize;
      color: $defaultModuleTitleColor;
      &.can-click {
        span {
          cursor: pointer;
        }
      }
      &.max-module-title {
        height: 0!important;
        display: none;
      }
      .module-title-img{
        height: 52.6%;
        margin: 0 5px 0;
      }
    }
    .module-main {
      width: 100%;
      height: 86.5%;
      &.max-module-main {
        height: 100%!important;
      }
      .view-permission {
        width: 100%;
        height: 100%;
        position: relative;
        .view-permission-content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          img {
            width: 104px;
            margin-bottom: 6px;
          }
          p {
            color: #2462FF;
            font-size: 12px;
            line-height: 20px;
          }
        }
      }
    }
  }
  &.flat-theme {
    .border-content {
      .module-title {
        height: 10%;
        width: 32%;
        margin: 0 auto 10px;
        box-sizing: border-box;
        justify-content: center;
        color: $flatModuleTitleColor;
      }
      .module-main {
        height: calc(90% - 10px);
      }
    }
  }
  &.default-height-left-title {
    .border-content {
      .module-title {
        height: 4.2%;
      }
      .module-main {
        height: 93.5%;
      }
    }
  }
  &.default-height-center-title {
     .border-content {
       .module-title {
         height: 6%;
         justify-content: center;
       }
       .module-main {
         height: 89%;
       }
     }
  }
  &.default-middle-left-title {
    .border-content {
      .module-title {
        height: 6%;
      }
      .module-main {
        height: 89%;
      }
    }
  }
  &.default-short-center-title {
    .border-content {
      .module-title {
        justify-content: center;
      }
    }
  }
  &.flat-middle-center-title {
    .border-content {
      .module-title {
        height: 6.5%;
        justify-content: center;
      }
      .module-main {
        height: 90%;
      }
    }
  }
  &.flat-height-center-title {
    .border-content {
      .module-title {
        height: 5%;
        justify-content: center;
      }
      .module-main {
        height: 94.4%;
      }
    }
  }
}
@media screen and (min-width: 1890px) {
  .module-border {
    .border-content {
      .module-main {
        .view-permission {
          .view-permission-content {
            .img {
              width: 125px;
            }
          }
        }
      }
    }
  }
}
</style>
